<template>
    <div id="c1"></div>
</template>

<script>
    import G2 from '@antv/g2';

    export default {
        data() {
            return {
                chart: null,
                data: [{
                    year: '1951 年',
                    sales: 38
                }, {
                    year: '1952 年',
                    sales: 52
                }, {
                    year: '1956 年',
                    sales: 61
                }, {
                    year: '1957 年',
                    sales: 145
                }, {
                    year: '1958 年',
                    sales: 48
                }, {
                    year: '1959 年',
                    sales: 38
                }, {
                    year: '1960 年',
                    sales: 38
                }, {
                    year: '1962 年',
                    sales: 38
                }]
            }
        },
        mounted() {
            // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
            // Step 1: 创建 Chart 对象
            this.chart = new G2.Chart({
                container: 'c1', // 指定图表容器 ID
                height: 300 ,// 指定图表高度
                forceFit: true,
                padding: 'auto'
            });

            // Step 2: 载入数据源
            this.chart.source(this.data);
            // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
            this.chart.interval().position('year*sales');
            // Step 4: 渲染图表
            this.chart.render();
        }
    }
</script>

<style scoped>
#c1{
    width: 100%;
    height: 100%;
}
</style>